<template>
  <div>
    <div class="tab border-bottom">
      <router-link to="tab-goods" tag="div" class="tab-item">商品</router-link>
      <router-link to="tab-ratings" tag="div" class="tab-item">评论</router-link>
      <router-link to="tab-seller" tag="div" class="tab-item">商家</router-link>
    </div>
    <!--变化的数据-->
    <router-view :seller="seller" :goods="goods" :ratings="ratings"></router-view>
  </div>

</template>

<script>
import {urlParse} from '../../common/js/date'
import axios from 'axios'
export default {
  name: 'Tab',
  data () {
    return {
      seller: {
        id: (() => {
          let queryParam = urlParse()
          return queryParam.id
        })()
      },
      goods: [],
      ratings: []
    }
  },
  created () {
    axios.get('/api/data.json?id=' + this.seller.id)
      .then((res) => {
        res = res.data
        if (res) {
          this.seller = res.seller
          this.goods = res.goods
          this.ratings = res.ratings
        }
      })
  }
}
</script>

<style lang="stylus" scoped>
  .tab
    display flex
    width 100%
    height .8rem
    line-height .8rem
    .tab-item
      flex 1
      font-size .28rem
      line-height .8rem
      color rgb(77, 85, 93)
      text-align center
    .router-link-active
      color rgb(240, 20, 20)
</style>
